<ActionBar class="action-bar">
  <Label class="action-bar-title" text="Barcode scanning"></Label>
</ActionBar>

<GridLayout>
  <MLKitBarcodeScanner
      width="100%"
      height="100%"
      formats="QR_CODE, UPC_A, EAN_13"
      beepOnScan="false"
      supportInverseBarcodes="false"
      processEveryNthFrame="10"
      [torchOn]="torchOn"
      [pause]="pause"
      (scanResult)="onBarcodeScanResult($event)">
  </MLKitBarcodeScanner>

  <GridLayout rows="*, 320, *" columns="*, 5/6*, *">
    <Label class="mask" row="0" col="0" colSpan="3"></Label>
    <Label class="mask" row="2" col="0" colSpan="3"></Label>
    <Label class="mask" row="1" col="0"></Label>
    <Label class="mask" row="1" col="2"></Label>
    <GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
      <Label class="frame-top-left" row="0" col="0"></Label>
      <Label class="frame-top-right" row="0" col="2"></Label>
      <Label class="frame-bottom-left" row="2" col="0"></Label>
      <Label class="frame-bottom-right" row="2" col="2"></Label>
      <StackLayout class="swing" row="0" col="0" colSpan="3">
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
        <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
      </StackLayout>
    </GridLayout>
    <Label row="0" col="1" class="text-center c-white" textWrap="true" verticalAlignment="center" text="The scanner has been configured to detect QR codes, UPC A, and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin. Oh, and we briefly pause the scanner after every scan, just for show."></Label>
    <ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20" backgroundColor="transparent">
      <ng-template let-item="item">
        <GridLayout columns="2*, 3*">
          <Label col="0" class="mlkit-result" textWrap="true" [text]="item.format"></Label>
          <Label col="1" class="mlkit-result" textWrap="true" [text]="item.displayValue"></Label>
        </GridLayout>
      </ng-template>
    </ListView>
  </GridLayout>

  <GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">
    <Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>
    <Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>
  </GridLayout>

</GridLayout>
